<script setup lang="ts">
import {ref} from 'vue'
import {GetMd5, OpenFileDialog,GetBase64,LnkInfo,Lnk2Png,Exe2Png} from '../../../../wailsjs/go/view/App'

const currText = ref() // 当前输入框
const currFilePath = ref() // 当前文件的路径，由go提供。js是无法直接获取当文件路径的，需要依赖go的runtime
const showText = ref() // 右侧input text
const showTextBool = ref(true) // 是否显示 input text
const base64Img=ref() // 图片的base64字符串

const clickMd5Btn = async () => {
  showText.value = await GetMd5(currFilePath.value)
  showTextBool.value = true
}
const clickBase64Btn =async ()=>{
  showText.value = await GetBase64(currFilePath.value)
  showTextBool.value = true
}
const clickShowBase64Btn = async ()=>{
  let bsStr= await GetBase64(currFilePath.value)
  if ( !bsStr.startsWith("data:image/png;base64,") ){
    bsStr="data:image/png;base64,"+bsStr
  }
  base64Img.value = bsStr
  showTextBool.value = false
}
const clickLnkBtn = async ()=>{
  const info = await LnkInfo(currText.value)
  showText.value = JSON.stringify(info)
  showTextBool.value = true
}
const clickLnk2PngBtn =async ()=>{
  let bsStr = await Lnk2Png(currText.value)
  if ( !bsStr.startsWith("data:image/png;base64,") ){
    bsStr="data:image/png;base64,"+bsStr
  }
  base64Img.value = bsStr
  showTextBool.value = false
}

const clickExe2PngBtn =async ()=>{
  let bsStr = await Exe2Png(currText.value)
  if ( !bsStr.startsWith("data:image/png;base64,") ){
    bsStr="data:image/png;base64,"+bsStr
  }
  base64Img.value = bsStr
  showTextBool.value = false
}

const handleOpenFile = async () => {
  currFilePath.value = await OpenFileDialog()
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card>
          <div class="h-80 overflow-auto">
            <div class="flex">
              <el-button type="primary" @click="handleOpenFile">选择文件</el-button>
              <div class="w-4/5 ml-2">
                <el-input v-model="currText" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="入参，例如base64字符串、文件路径等"/>
              </div>
            </div>
            <el-divider />
            <div class="flex items-center">
              <el-button type="primary" @click="clickMd5Btn">MD5</el-button>
              <el-button type="primary" @click="clickBase64Btn">Base64</el-button>
              <el-button type="primary" @click="clickShowBase64Btn">Base64预览</el-button>
              <el-tooltip content="base64预览请输入图片base64的字符串，不用添加 `data:image/png;base64,` 前缀，程序会自动补全 " placement="top" effect="light">
                <el-icon class="ml-2" ><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="flex items-center mt-2">
              <el-button type="primary" @click="clickLnkBtn">Lnk提取</el-button>
              <el-button type="primary" @click="clickLnk2PngBtn">Lnk2png</el-button>
              <el-button type="primary" @click="clickExe2PngBtn">exe2png</el-button>
              <el-tooltip content="请在入参填写Lnk路径或exe执行文件路径。windows下默认快捷方式不是文件，会自动过滤掉lnk文件" placement="top" effect="light">
                <el-icon class="ml-2" ><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="h-80 overflow-auto">
            <div v-show="!showTextBool">
              <img  :src="base64Img" style="max-width: 100%;">
            </div>
            <div v-show="showTextBool">
              <el-input
                v-model="showText"
                :autosize="{ minRows: 4, maxRows: 6 }"
                type="textarea"
                placeholder="预览结果"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped></style>
